<template>
  <div class="wrapper">
    <Row>
      <Col span="24">
      <Card class="article-detail">
        <Table :loading="loading" border :columns="columns" :data="data" ref="table">
          <!-- 页面展示 -->
          <template slot-scope="{ row }" slot="ownerCardno">
            <span class="yemian" v-html="row.content" style="overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; ">
            </span>
          </template>
        </Table>
        <!-- <Row type="flex" justify="end" class="mt_10">
          <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator>
          </Page>
        </Row> -->
      </Card>
      </Col>
    </Row>
    <template>
      <Modal title="修改" v-model="modalVisible" :mask-closable="false" :width="1100">
        <Form ref="form" :model="form" :label-width="100">
          <FormItem label="位置：" prop="title">
            <div style="font-size: 14px;">{{form.name}}</div>
          </FormItem>
          <FormItem class="form-item-view-el" label="上传图片：" prop="content">
            <div style="display: flex; flex-wrap: flex-start">
              <vuedraggable :list="form.content" :animation="200">
                <div class="demo-upload-list" v-for="(item, __index) in form.content" :key="__index">
                  <template>
                    <img :src="item.url" />
                    <div class="demo-upload-list-cover">
                      <div>
                        <Icon type="md-search" size="30" @click.native="handleViewGoodsPicture(item.url)"></Icon>
                        <Icon type="md-trash" size="30" @click.native="handleRemoveGoodsPicture(item)"></Icon>
                      </div>
                    </div>
                  </template>
                </div>
              </vuedraggable>
              <Upload ref="upload" multiple :show-upload-list="false" :on-success="handleSuccessGoodsPicture" :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize" :max-size="3072" :before-upload="handleBeforeUploadGoodsPicture" type="drag" :action="uploadFileUrl" :headers="{ ...accessToken }" style="margin-left: 10px">
                <div style="width: 148px; height: 148px; line-height: 148px">
                  <Icon type="md-add" size="20"></Icon>
                </div>
              </Upload>
            </div>
            <Modal :title="form.name" v-model="goodsPictureVisible">
              <img :src="previewGoodsPicture" v-if="goodsPictureVisible" style="width: 100%" />
            </Modal>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="modalVisible = false">取消</Button>
          <Button type="primary" :loading="submitLoading" @click="handleSubmit">保存</Button>
        </div>
      </Modal>
    </template>
  </div>
</template>

<script>
import {
  putPicture,
  getPictureDetails,
  getPictureList
} from "@/api/pages"
import editor from "@/views/my-components/lili/editor"
import { uploadFile } from "@/api/index"
import vuedraggable from "vuedraggable"

export default {
  name: "centre",
  components: {
    editor,
    vuedraggable
  },
  props: {
    selected: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      //展示商品图片
      goodsPictureVisible: false,
      //上传图片路径
      uploadFileUrl: uploadFile,
      accessToken: "", //令牌token
      loading: true, // 表单加载状态
      modalVisible: false, // 修改显示
      searchForm: {
        // 搜索框初始化对象
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
      },
      form: {
        id: '',
        name: "",
        content: [],
        code: '',
      },
      list: [], // 列表
      submitLoading: false, // 添加或编辑提交状态
      columns: [
        // 表头
        {
          type: 'index',
          title: "序号",
          width: 80,
          align: 'center'
        },
        {
          title: "位置",
          key: "name",
          width: 200,
          tooltip: true,
        },
        {
          title: "更新时间",
          key: "updateTime",
          tooltip: true,
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          width: 140,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    size: "small",
                    type: "info",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: () => {
                      this.edit(params.row)
                    },
                  },
                },
                "修改"
              ),
            ])
          },
        },
      ],
      data: [], // 表单数据
      total: 0, // 表单数据总数
    }
  },
  watch: {},
  methods: {
    // 查看商品大图
    handleViewGoodsPicture (url) {
      this.previewGoodsPicture = url
      this.goodsPictureVisible = true
    },
    // 移除商品图片
    handleRemoveGoodsPicture (file) {
      this.form.content = this.form.content.filter(
        (i) => i.url !== file.url
      )
    },
    // 图片上传成功
    handleSuccessGoodsPicture (res, file) {
      if (file.response) {
        file.url = file.response.result
        this.form.content.push(file)
      }
    },
    // 图片格式不正确
    handleFormatError (file) {
      this.$Notice.warning({
        title: "文件格式不正确",
        desc: "文件 " + file.name + " 的格式不正确",
      })
    },
    // 图片大小不正确
    handleMaxSize (file) {
      this.$Notice.warning({
        title: "超过文件大小限制",
        desc: "图片大小不能超过3MB",
      })
    },
    // 图片上传前钩子
    handleBeforeUploadGoodsPicture (file) {
      console.log("图片上传前钩子", file)
      if (this.form.code !== 'guide') {
        this.form.content = []
      }
      const check = this.form.content.length < 9999
      if (!check) {
        this.$Notice.warning({
          title: "图片数量不能大于五张",
        })
        return false
      }
    },
    // 获取图片列表
    getPictureList () {
      this.loading = true
      getPictureList().then((res) => {
        this.loading = false
        if (res.success) {
          this.data = res.result
        }
      })
      this.loading = false
    },
    // 提交修改
    handleSubmit () {
      // if (this.form.code !== 'guide') {
      //   if (this.form.content.length > 1) {
      //     this.$Message.error(`${this.form.name} 只能传一张图片`)
      //     return
      //   }
      // }
      let content = []
      this.form.content.map(item => {
        return content.push(item.url)
      })
      content = content.join(',')
      putPicture({
        ...this.form,
        content
      }).then((res) => {
        if (res.success) {
          this.modalVisible = false
          this.$Message.success("修改成功")
          this.getPictureList()
        }
      })
    },
    // 修改
    edit (data) {
      getPictureDetails(data.id).then((res) => {
        if (res.success) {
          console.log("&^&^&", res)
          this.modalVisible = true
          this.form.id = res.result.id
          let content = res.result.content == '' ? [] : res.result.content?.split(',') || []
          this.form.content = content.map(item => {
            return {
              url: item
            }
          })
          this.form.name = res.result.name
          this.form.code = res.result.code
        }
      })
    },
  },
  mounted () {
    this.getPictureList()
    this.accessToken = {
      accessToken: this.getStore("accessToken"),
    }
  },
};
</script>
<style lang="scss" scoped>
.yemian img {
  display: none;
}
.w-e-text img {
  width: 200px;
}
.demo-upload-list {
  width: 150px;
  height: 150px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 4px;
  display: inline-block;
  background: #fff;
  position: relative;
  margin-right: 4px;
  vertical-align: bottom;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;

  right: 0;
  background: rgba(0, 0, 0, 0.6);

  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.demo-upload-list:hover .demo-upload-list-cover {
  display: flex;
}

.demo-upload-list-cover div {
  margin-top: 50px;
  width: 100%;

  > i {
    width: 50%;
    margin-top: 8px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
